<template>
    <div>
        <el-card>
             <el-row :gutter="12">
                <el-col :span="10">
                </el-col>
            </el-row>
            <el-table :data="channelList" border stripe>
                <el-table-column label="渠道标识" prop="channel"></el-table-column>
                <el-table-column label="渠道名称" prop="name"></el-table-column>
                 <el-table-column label="排序" prop="sort">
                    <template slot-scope="scope">
                         <el-button
                            type="text"
                            size="small"
                            @click="moveUp(scope.row, scope.$index)"
                            :disabled="scope.$index === 0">上移</el-button>

                         <el-button
                            type="text"
                            size="small" style="margin-left:16px"
                            @click="moveDown(scope.row, scope.$index)"
                            :disabled="getFormLength(scope.$index)" >下移</el-button>
                    </template>
                </el-table-column>
                <!-- 分页 -->
            </el-table>
        </el-card>
    </div>
</template>

<script>
import Api from '@/api/Movie.js'
 import axios from 'axios'
export default {
    data() {
        return {
            queryInfo: {

            },
            channelList: []
        }
    },
    created() {
        this.getMovieChannelSortList()
    },
    methods: {
      getMovieChannelSortList() {
            Api.getMovieChannelSortList(this.queryInfo).then(res => {
                if (res.success) {
                    this.channelList = res.data
                } else {
                    return this.$message.error('获取渠道类别失败')
                }
            })
        },
      saveMovieChannelSort() {
            var orderRes = "";
            for( let i of this.channelList){
                orderRes = orderRes.concat(i.channel, ",");
            }
            orderRes = orderRes.substr(0,orderRes.length-1);
            Api.saveMovieChannelSort({'value':orderRes}).then(res => {
                if (res.success) {
                    return this.$message.success('设置成功')
                } else {
                    return this.$message.error('获取渠道类别失败')
                }
            })
        },
        moveUp(item, index) {
            this.channelList.splice(index - 1, 0, item);  // 定位到点击位置的上一行，0即不删除如何元素，在此位置插入item
            this.channelList.splice(index + 1, 1); // 此时数组中有重复元素，把原来被挤下去的元素删除
            this.saveMovieChannelSort();
        },
        // 下移
        moveDown(item, index) {
            this.channelList.splice(index + 2, 0, item);
            this.channelList.splice(index, 1);
            this.saveMovieChannelSort();
        },
        getFormLength(index) {
            if (index === this.channelList.length - 1) return true;
            else return false;
        }
    }
}
</script>

<style>

</style>
